<template>
  <el-row id="exam-box">
      <Breadcrumb :breadcrumb="breadcrumb"/>
      <el-row>
        <el-table
          id="exam-table"
          :data="examList"
          style="width: 100%"
          height="600"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column label="序号" type="index" width="90"> </el-table-column>
          <el-table-column prop="examName" label="试卷名" width="360">
          </el-table-column>
          <el-table-column prop="examDate" label="开考时间" width="210">
          </el-table-column>
          <el-table-column prop="totalTime" label="作答时长" width="120">
          </el-table-column>
          <el-table-column prop="totalScore" label="总分" width="90">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="90">
          </el-table-column>
          <el-table-column prop="examNote" label="试卷备注" width="270">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateExamButton(scope.row)"
                >修改</el-button
              >
              <el-button type="primary" size="mini" @click="goRoute({name:'examEdit',params:{exam:scope.row}})">编辑题目</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="deleteExamButton(scope.row.examId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog id="examUpdateForm" title="试卷修改" :visible.sync="dialogFormVisible">
          <el-form :model="examUpdateForm">
            <el-form-item label="试卷名称">
              <el-input v-model="examUpdateForm.examName" placeholder="请输入试卷名称"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="examUpdateForm.examDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                default-time="12:00:00">
              </el-date-picker>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="考试时长">
                  <el-col :span="10">
                    <el-input v-model="examUpdateForm.totalTime" type="number" min="0" max="9999" placeholder="请输入考试时长"></el-input>
                  </el-col>
                  <span class="textType1">分钟</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="试卷总分">
                  <el-col :span="10">
                    <el-input v-model="examUpdateForm.totalScore" type="number" min="0" max="9999" placeholder="请输入试卷总分"></el-input>
                  </el-col>
                  <span class="textType1">分</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="试卷说明">
              <el-input type="textarea" :rows="5" v-model="examUpdateForm.examNote"  placeholder="可输入试卷说明"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateExam">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
  </el-row>
</template>

<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import { mapState } from 'vuex'
export default {
  name: "Exam",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"试卷管理",path:"exam"},
        {name:"所有试卷",path:""},
      ],
      searchValue:"",
      examList:[
      ],
      dialogFormVisible: false,
      examUpdateForm: {
        examName:'',
        totalTime:''
      },
    }
  },
  created(){
      this.getExam(this.course.courseName)
  },
  methods:{
    getExam(courseName){
      this.axios.get("/exam/"+courseName)
        .then(response => {
          if(response.status == 200){
              this.examList = response.data.data;
          }
          console.log(this.examList)
      }).catch(error => alert(error));
    },
    goRoute(location){
      console.log(this)
      this.$router.push(location)
    },
    deleteExamButton(examId) {
      this.$confirm('此操作将永久删除该试卷, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteExam(examId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteExam(examId){
      this.axios.post("/exam/delete",{examId})
        .then(response => {
            if(response.status == 200){
                this.hintMessage("删除试卷成功")
                this.refreshProblemList()
                // this.$router.replace('/Exam');//跳转到路径
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
    },
    hintMessage(value){
      this.$message({
        showClose: true,
        message: value,
        type: 'success'
      });
    },
    refreshProblemList(){
      this.getExam(this.course.courseName)
    },
    updateExamButton(row){
      this.dialogFormVisible = true
      this.examUpdateForm=Object.assign({},row)//浅拷贝row
    },
    updateExam(){
      this.axios.post("/exam/update",this.examUpdateForm)
        .then(response => {
            if(response.status == 200){
                this.hintMessage("修改试卷成功")
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
      this.dialogFormVisible = false
    }
  },
  computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-box {
    padding-top: 20px;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;

    background-color: #f6fafb !important;
    height: 100%;
}
#exam-header-box{
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 20px;
    margin-top: 30px;
    margin-bottom: 40px;
}
#exam-box .buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
#search-box {
  /* margin-top: 30px; */
  height: 40px;
}
#exam-header-buuton-box{
    line-height: 40px;
}
#exam-list-header{
  width: 100%;
  height: 60px;
  background-color: #fafafa;
  border-bottom: 1px solid #EBEEF5;
}

#exam-list-title{
  line-height: 60px;
  padding-left: 30px;
}
.exam-list-item{
  padding: 20px;
  border-bottom: 1px solid #EBEEF5;
  height: 105px;
}
.exam-item-examName{
  font-size: 16px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 20px;
}
.exam-item-button-group{
  line-height: 62.58px;
}
#exam-list{
  padding-top: 30px;
}
.textType1{
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
}

</style>
<style>
/* 修改element-ui的样式 */
#examUpdateForm .el-form-item .el-form-item__label{
  display:block!important;
  height: 40px!important;
  line-height: 40px!important;
  margin: 0px;
}
#examUpdateForm .el-dialog__body{
  padding-top: 10px;
}
#examUpdateForm .el-dialog__header{
  border-bottom: 1px solid #EBEEF5;
}
</style>